<template>
    <div class="wl-collapse">
        <slot></slot>
    </div>
</template>

<script setup lang="ts">
import { ref, provide } from 'vue'
import { collapseProps, collapseContenxKey } from './props';
defineOptions({
    name: 'wl-collapse'
})
const props = defineProps(collapseProps)
const modelValue = defineModel()
// 关于展开面板的核心逻辑，其实就是判断数组里面的值
// 然后根据值来判断是否展开
//['a']代表a这个面板是展开的
// 因此核心就是针对数组进行操作
// 拿到用户所传递的哪些面板是打开的数组
const activeNames = ref(props.modelValue)
// Collapse组件有一个核心的方法，就是项目相关的点击事件
const handleItemClick = (itemname: string) => {
    let _activeNamesArr = [...activeNames.value]
    if (props.accordion) {
        // 说明当前是手风琴模式
        _activeNamesArr = [activeNames.value[0] === itemname ? '' : itemname]
    } else {
        const index = _activeNamesArr.indexOf(itemname)
        if (index > -1) {
            _activeNamesArr.splice(index, 1)
        } else {
            _activeNamesArr.push(itemname)
        }
    }
    activeNames.value = _activeNamesArr
    modelValue.value = activeNames.value
}
provide(collapseContenxKey, {
    activeNames,
    handleItemClick
})
</script>

<style scoped lang="scss"></style>